<template>
	<div class="AdvGroup">
		<div v-if="modelData.style.styleId !== 3" class="group-one">
			<div class="one-li one-left" @click="navTo(modelData.adv_list[0].url, modelData.adv_list[0].switchTab)">
				<div class="left-title-view">
					<span class="title" :style="{ color: modelData.adv_list[0].titleColor }">{{ modelData.adv_list[0].title }}</span>
					<span class="desc" :style="{ color: modelData.adv_list[0].descColor }">{{ modelData.adv_list[0].desc }}</span>
				</div>
				<div class="more-btn">
					<span>{{ modelData.adv_list[0].btnText }}</span>
					<span class="ibonfont ibonjinru"></span>
				</div>
				<div><image class="adv-img" mode="aspectFill" :src="modelData.adv_list[0].image.url" /></div>
			</div>
			<div class="one-li one-right">
				<div class="right-li clearfix" @click="navTo(modelData.adv_list[1].url, modelData.adv_list[1].switchTab)">
					<div class="float_left">
						<p class="title" :style="{ color: modelData.adv_list[1].titleColor }">{{ modelData.adv_list[1].title }}</p>
						<p class="desc" :style="{ color: modelData.adv_list[1].descColor }">{{ modelData.adv_list[1].desc }}</p>
						<div class="more-btn">
							<span>{{ modelData.adv_list[1].btnText }}</span>
							<span class="ibonfont ibonjinru"></span>
						</div>
					</div>
					<div class="float_right"><image class="adv-img" mode="aspectFill" :src="modelData.adv_list[1].image.url" /></div>
				</div>
				<div class="right-li clearfix" @click="navTo(modelData.adv_list[2].url, modelData.adv_list[2].switchTab)">
					<div class="float_left">
						<p class="title" :style="{ color: modelData.adv_list[2].titleColor }">{{ modelData.adv_list[2].title }}</p>
						<p class="desc" :style="{ color: modelData.adv_list[2].descColor }">{{ modelData.adv_list[2].desc }}</p>
						<div class="more-btn">
							<span>{{ modelData.adv_list[2].btnText }}</span>
							<span class="ibonfont ibonjinru"></span>
						</div>
					</div>
					<div class="float_right"><image class="adv-img" mode="aspectFill" :src="modelData.adv_list[2].image.url" /></div>
				</div>
			</div>
		</div>
		<div v-if="modelData.style.styleId === 1" class="group-two">
			<div class="group-li" @click="navTo(modelData.adv_list[3].url, modelData.adv_list[3].switchTab)">
				<div class="group-title">
					<span class="title" :style="{ color: modelData.adv_list[3].titleColor }">{{ modelData.adv_list[3].title }}</span>
					<span class="desc" :style="{ color: modelData.adv_list[3].descColor }">{{ modelData.adv_list[3].desc }}</span>
				</div>
				<div class="clearfix">
					<div class="more-btn float_left">
						<span>{{ modelData.adv_list[3].btnText }}</span>
						<span class="ibonfont ibonjinru"></span>
					</div>
					<div class="float_right"><image class="adv-img" mode="aspectFill" :src="modelData.adv_list[3].image.url" /></div>
				</div>
			</div>
			<div class="group-li" @click="navTo(modelData.adv_list[4].url, modelData.adv_list[4].switchTab)">
				<div class="group-title">
					<span class="title" :style="{ color: modelData.adv_list[4].titleColor }">{{ modelData.adv_list[4].title }}</span>
					<span class="desc" :style="{ color: modelData.adv_list[4].descColor }">{{ modelData.adv_list[4].desc }}</span>
				</div>
				<div class="clearfix">
					<div class="more-btn float_left">
						<span>{{ modelData.adv_list[4].btnText }}</span>
						<span class="ibonfont ibonjinru"></span>
					</div>
					<div class="float_right"><image class="adv-img" :src="modelData.adv_list[4].image.url" mode="aspectFill" /></div>
				</div>
			</div>
		</div>
		<!--    样式3-->
		<div v-if="modelData.style.styleId === 3" class="group-two">
			<div class="group-li" @click="navTo(modelData.adv_list[0].url, modelData.adv_list[0].switchTab)">
				<div class="group-title">
					<span class="title" :style="{ color: modelData.adv_list[0].titleColor }">{{ modelData.adv_list[0].title }}</span>
					<span class="desc" :style="{ color: modelData.adv_list[0].descColor }">{{ modelData.adv_list[0].desc }}</span>
				</div>
				<div class="clearfix">
					<div class="more-btn float_left">
						<span>{{ modelData.adv_list[0].btnText }}</span>
						<span class="ibonfont ibonjinru"></span>
					</div>
					<div class="float_right"><image class="adv-img" mode="aspectFill" :src="modelData.adv_list[0].image.url" /></div>
				</div>
			</div>
			<div class="group-li" @click="navTo(modelData.adv_list[1].url, modelData.adv_list[1].switchTab)">
				<div class="group-title">
					<span class="title" :style="{ color: modelData.adv_list[1].titleColor }">{{ modelData.adv_list[1].title }}</span>
					<span class="desc" :style="{ color: modelData.adv_list[1].descColor }">{{ modelData.adv_list[1].desc }}</span>
				</div>
				<div class="clearfix">
					<div class="more-btn float_left">
						<span>{{ modelData.adv_list[1].btnText }}</span>
						<span class="ibonfont ibonjinru"></span>
					</div>
					<div class="float_right"><image class="adv-img" mode="aspectFill" :src="modelData.adv_list[1].image.url" /></div>
				</div>
			</div>
		</div>
		<NoLoginTip @cancel="cancelTip" :show="loginTip" v-if="loginTip" />
	</div>
</template>

<script>
import NoLoginTip from '../../NoLoginTip.vue';
export default {
	name: 'AdvGroup',
	components: {
		NoLoginTip
	},
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data(){
		return{
			loginTip:false
		}
	},
	methods: {
		cancelTip() {
			this.loginTip = false;
		},
		navTo(url, switchTab) {
			if (!this.$common.isLogin()) {
				this.loginTip = true;
			} else {
				this.goPage(url, switchTab);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.AdvGroup {
	background-color: #ffffff;
	.more-btn {
		font-size: 20rpx;
		font-weight: 400;
		color: #cacaca;
		line-height: 28rpx;
		.ibonfont {
			font-size: 20rpx;
		}
	}
	.group-one {
		display: flex;
		.one-li {
			flex: 2;
		}
		.one-left {
			padding-left: 32rpx;
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			border-right: 1px solid #eeeeee;
			.adv-img {
				margin-top: 32rpx;
				width: 318rpx;
				height: 240rpx;
				border-radius: 16rpx;
			}
			.left-title-view {
				line-height: 46rpx;
				padding-bottom: 8rpx;
				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: #2a2a2a;
				}
				.desc {
					margin-left: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #f05064;
				}
			}
		}
		.one-right {
			padding-right: 32rpx;
			.right-li {
				padding: 24rpx 0 24rpx 24rpx;
				position: relative;
				.more-btn {
					position: absolute;
					left: 24rpx;
					bottom: 24rpx;
				}
				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #2a2a2a;
					line-height: 40rpx;
				}
				.desc {
					font-size: 24rpx;
					font-weight: 400;
					color: #fd6f02;
					line-height: 34rpx;
					padding-top: 8rpx;
				}
				&:first-child {
					border-bottom: 1px solid #eeeeee;
					.desc {
						color: #3cb4b6;
					}
				}
			}
			.adv-img {
				width: 134rpx;
				height: 152rpx;
				border-radius: 8rpx;
			}
		}
	}
}
.group-two {
	display: flex;
	border-top: 1px solid #eeeeee;
	.group-li {
		padding: 24rpx 0;
		flex: 2;
		&:first-child {
			padding-left: 32rpx;
			padding-right: 24rpx;
			border-right: 1px solid #eeeeee;
		}
		&:nth-child(2) {
			padding-right: 32rpx;
			padding-left: 24rpx;
		}
		.group-title {
			padding-bottom: 12rpx;
			line-height: 40rpx;
			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #2a2a2a;
			}
			.desc {
				margin-left: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #19906c;
			}
		}
		.adv-img {
			width: 194rpx;
			height: 108rpx;
			border-radius: 8rpx;
		}
	}
}
</style>
